/**
 *new http:fetch
 * 一个基于promise的请求方法，更简便，更便捷
 */

document.getElementById('button1').addEventListener('click',getText);
document.getElementById('button2').addEventListener('click',getJson);
document.getElementById('button3').addEventListener('click',getExternal);

//获取本地数据
function getText(){
    fetch("test.txt")
        .then(res=>res.text())
        .then(data=>{
            console.log(data);
            document.getElementById('output').innerHTML=data;
        })
        .catch(err=>console.log(err));
}

function getJson(){
    fetch("posts.json")
        .then(res=>res.json())
        .then(data=>{
            console.log(data);
            let output='';
            data.forEach(post => {
                output+=`<li>${post.title}</li>`;
            });
            document.getElementById('output').innerHTML=output;
        })
        .catch(err=>console.log(err));
}

//请求网络api
function getExternal(){
    fetch("https://api.github.com/users")
        .then(res=>(res.json()))
        .then(data=>{
            console.log(data);
        })
}